<template>
  <div class="container-wrap">
	  <div class="container-content-wrap">
		<div class="head">
		  	<span>日志</span>
			<div>
				<!-- <input type="text"  v-model="keywords" placeholder="请输入姓名检索" @keydown="handleSearch"/> -->
				<el-date-picker
					v-model="searchDate"
					type="daterange"
					unlink-panels
					range-separator="To"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					:shortcuts="shortcuts"
					:size="size"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					@change="changeForDate"
				/>
				
			</div>
		</div>
		<div style="padding: 5px;">
			<el-table
			  :v-loading="loading"
			  :data="tableData"
			  style="width: 100%; margin-bottom: 20px"
			  row-key="id"
			  
			  default-expand-all
			>
				<el-table-column prop="title" label="标题"  />
				<el-table-column prop="url" label="URL"  />
				<el-table-column prop="ip" label="IP"  />
				<el-table-column prop="useragent" label="UserAgent"  />
				<el-table-column prop="username" label="用户名称"  />
				<el-table-column prop="createTime" label="创建时间"  />
				
				<el-table-column fixed="right" align="center" label="操作">
<!-- 					<template #header>
						<el-button type="primary" plain link :icon="Plus"  @click.stop="openDialog(null,'add')">主账号</el-button>
					</template> -->
				  <template #default="scope">
						<el-tooltip
						  class="box-item"
						  effect="dark"
						  content="查看详情"
						  placement="top"
						>
							<el-button
							  v-show="scope.row.username!='administrator' "
							  type="primary"
							  link
							  size="small"
							   @click.stop="openDialog(scope.row)"
							  ><i-ep-view />
							</el-button>
						</el-tooltip>
				  </template>
				</el-table-column>
			</el-table>
			
			 <el-pagination
			    small
			    background
			    layout="prev, pager, next"
			    :total="50"
				:current-page="currentPage"
			  />
			
		</div>	
	</div>
	<el-dialog
	  v-model="dialog.visible"
	  :title="dialog.title"
	  destroy-on-close
	  append-to-body
	  width="750px"
	  @close="closeDialog"
	>
	
	
	<el-form
	  ref="userFormRef"
	  :model="userFormData"
	  :rules="userFormRules"
	  label-width="100px"
	>
		<el-form-item label="姓名" prop="name">
		  <el-input v-model="userFormData.name" placeholder="请输入姓名" />
		</el-form-item>
		
		<el-form-item label="账号" prop="username">
		  <el-input v-model="userFormData.username" placeholder="请输入账号" />
		</el-form-item>
		
		<el-form-item label="手机号" prop="phone">
		  <el-input v-model="userFormData.phone" placeholder="手机号" />
		</el-form-item>
	</el-form>

	<template #footer>
	  <div class="dialog-footer">
	    <el-button type="primary" @click="submitForm"  :loading="loading">确 定</el-button>
	    <el-button @click="closeDialog" :loading="loading">取 消</el-button>
	  </div>
	</template>

	</el-dialog>
	
	
  </div>
</template>
<script lang="ts" setup>
	
	import { reactive, ref } from 'vue'
 	import {
	  Plus,View
	} from '@element-plus/icons-vue' 
	
	import { pagesForUserLog} from "@/api/user";
	const size = ref<'default' | 'large' | 'small'>('default')

	const tableData=ref([]);
	
	const loading = ref(false);
	const dialog = ref({
		visible:false,
		title:'',
	});
	
	const currentPage=ref(1)
	
	
	const userFormData=reactive<Object>({
		id:'',
		pid:'',
		username:'',
		name:'',
		phone:'',
	})
	
	
	const searchDate = ref('')
	
	const shortcuts = [
	  {
	    text: '最近一周',
	    value: () => {
	      const end = new Date()
	      const start = new Date()
	      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
	      return [start, end]
	    },
	  },
	  {
	    text: '最近一月',
	    value: () => {
	      const end = new Date()
	      const start = new Date()
	      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
	      return [start, end]
	    },
	  },
	  {
	    text: '最近3个月',
	    value: () => {
	      const end = new Date()
	      const start = new Date()
	      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
	      return [start, end]
	    },
	  },
	]
	
	const load=()=>{
		loading.value=true;
		pagesForUserLog({
			cur:0,
			limit:10
		})
		.then(({result}) => {
			tableData.value=result.list
			console.log(result);
		})
		.catch((e) => {
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	const changeForDate=(e)=>{
		console.log(e)
		console.log(searchDate.value)
	}
	
	
	const openDialog=(row:object,type:string)=>{
		if('add'==type){
			dialog.value.visible=true;
			dialog.value.title='新增';
			Object.assign(userFormData, {pid:row?row.id:'-1'});
		}else{
			dialog.value.visible=true;
			dialog.value.title='编辑';
			Object.assign(userFormData, row);
		}
	}
	
	
	const closeDialog=()=>{
		dialog.value.visible=false;
		dialog.value.title="";
		resetForm();
	}
	
	/**
	 * 重置表单
	 */
	function resetForm() {
	  userFormRef.value.resetFields();
	  userFormRef.value.clearValidate();
	
	  userFormData.id = "";
	  userFormData.pid = "";
	  userFormData.name= "";
	  userFormData.username= "";
	  userFormData.phone = "";
	}
	
	onMounted(() => {
		load();
	});
	
	
</script>
<style scoped>
	
	.container-wrap{
		position: relative;
		height: 100%;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction:row ;
		flex-direction: row;
		border-top: 1px solid #515664;
		
		.container-left-wrap{
			width: 250px;
			height: 100%;;
			color: #fff;
			position: relative;
			background-color: #2b2c2f;
			border-right: 1px solid #4d505e;
			>.nav-head{
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: justify;
				-ms-flex-pack: justify;
				justify-content: space-between;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				width: 100%;
				height: 34px;
				background-color: #36373a;
				border-bottom: 1px solid #18181b;
				color: #ccc;
				font-size: 14px;
				>span{
					border-left-width: 3px!important;
					padding-left: 8px!important;
					height: 16px;
					line-height: 17px;
					font-size: 13px;
					color: #ccc;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					white-space: nowrap;
					border-left: 2px solid #0080ff;
					margin-left: 8px;
					padding-left: 3px;
				}
				>div{
					float: right;
					margin-top: -1px;
					>button{
					   width: 1.4375rem;
					   height: 1.875rem;
					   margin-right: 0.3125rem;
					   background: transparent;
					   color: #ccc;
					   font-size: 16px;
					   margin-top: 3px;
					   cursor: pointer;
					}
				}
			}
		}
		
		
		>.container-content-wrap{
			flex: 1;
			width: 100%;
			
			>.head{
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: justify;
				-ms-flex-pack: justify;
				justify-content: space-between;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				width: 100%;
				height: 34px;
				background-color: #36373a;
				border-bottom: 1px solid #18181b;
				color: #ccc;
				font-size: 14px;
				>span{
					border-left-width: 3px!important;
					padding-left: 8px!important;
					height: 16px;
					line-height: 17px;
					font-size: 13px;
					color: #ccc;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					white-space: nowrap;
					border-left: 2px solid #0080ff;
					margin-left: 8px;
					padding-left: 3px;
				}
				>div{
					float: right;
					margin-top: -1px;
					padding-right: 0.625rem;
					>button{
					   width: 1.4375rem;
					   height: 1.875rem;
					   margin-right: 0.3125rem;
					   background: transparent;
					   color: #ccc;
					   font-size: 16px;
					   margin-top: 3px;
					   cursor: pointer;
					}
					>input[type=text]{
						background: #1f2632;
						border: 1px solid #4d505e;
						border-radius: 0.9375rem;
						outline-style: none ;
						caret-color:#0080ff;
						height: 1.625rem;
						color: #ccc;
						width: 17.5rem;
						padding-left: 1.125rem;
						padding-right: 1.125rem;
						background-image: url('/src/assets/icons/search.svg');
						
						background-size: 1.375rem;
						background-repeat: no-repeat;
						background-position-y: center;
						background-position-x: 15.625rem;
					}
					>input[type=text]:focus {
						border: 0px solid #0080ff;
					}
				}
			}
			
			>ul{
				>li{
					float: left;
					list-style:none;
					width: 270px;
					margin: 15px 30px 40px;
					-webkit-box-flex: 0;
					-ms-flex: 0 270px;
					flex: 0 270px;
					height: 199px;
					border: 1px solid #606475;
					cursor: pointer;
					position: relative;
					
					>.create{
						height: 100%;
						width: 100%;
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-pack: justify;
						-ms-flex-pack: justify;
						justify-content: space-around;
						-webkit-box-align: center;
						-ms-flex-align: center;
						align-items: center;
						background: -webkit-gradient(linear,left top,left bottom,from(#36393f),to(#27292e));
						background: linear-gradient(180deg,#36393f,#27292e); 
						cursor: pointer;
						>.el-icon{
							font-size: 60px;
							font-weight: bold;
						}
					}
					
					>.top{
						margin: 5px;
						border: 1px solid #606475;
						background: #121d2e;
						position: relative;
						height: 162px !important;
						width: 258px !important;
						>.img-mask{
							width: 100%;
							height: 100%;
							background: rgba(17,28,43,.95);
							position: absolute;
							left: 0;
							top: 0;
							height: 160px !important;
							width: 256px !important;
							display: none;
							
							>.opear{
								width: 100%;
								height: 60px;
								position: absolute;
								left: 0;
								right: 0;
								bottom: 0;
								top: 0px;
								margin: auto;
								display: -webkit-box;
								display: -ms-flexbox;
								display: flex;
								-webkit-box-orient: vertical;
								-webkit-box-direction: normal;
								-ms-flex-direction: column;
								flex-direction: column;
								-webkit-box-align: center;
								-ms-flex-align: center;
								align-items: center;
								>p{
									width: 112px;
									height: 24px;
									border-radius: 2px;
									background: rgba(27,102,240,.8);
									color: rgba(255, 255, 255, 0.8);
									font-size: 12px;
									text-align: center;
									line-height: 24px;
									float: none;
									margin: 0 auto;
									cursor: pointer;
								}
								>p:hover{
									background: rgba(27,102,240,1);
									color: rgba(255, 255, 255, 1);
								}
								>.menu-col-group{
									margin-top: 8px;
									width: 200px;
									-webkit-box-pack: center;
									-ms-flex-pack: center;
									justify-content: center;
									display: -webkit-box;
									display: -ms-flexbox;
									display: flex;
									-webkit-box-orient: horizontal;
									-webkit-box-direction: normal;
									-ms-flex-direction: row;
									flex-direction: row;
									-ms-flex-wrap: wrap;
									flex-wrap: wrap;
									>.menu-col{
									  position: relative;
									  display: -webkit-box;
									  display: -ms-flexbox;
									  display: flex;
									  -webkit-box-orient: vertical;
									  -webkit-box-direction: normal;
									  -ms-flex-direction: column;
									  flex-direction: column;
									  -webkit-box-align: center;
									  -ms-flex-align: center;
									  align-items: center;
									  cursor: pointer;
									  margin: 0 3px 5px;
									  >.icon{
									    font-size: 16px;
									    color: #a5b0cc;
									  }
									  >.hidden{
										border: 1px solid #0080ff;
										padding: 3px;
										width: 35px;
										position: absolute;
										top: 25px;
										color: #fff;
										display: none;
										font-size: 12px;
										text-align: center;
										z-index: 36;
										background: rgba(17,28,43,.95);
									  }
									}
									>.menu-col:hover{
										>.icon{
										  color: #0080ff;
										}
										>.hidden{
											display: block;
										}
									}
								}
							}
						}
						>img{
							height: 160px !important;
							width: 256px !important;
							-o-object-fit: cover;
							object-fit: cover;
							position: absolute;
						}
					}
					.bottom{
						
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-pack: justify;
						-ms-flex-pack: justify;
						justify-content: space-around;
						-webkit-box-align: center;
						-ms-flex-align: center;
						align-items: center;
					}
					.time{
					    display: -webkit-box;
					    display: -ms-flexbox;
					    display: flex;
					    -webkit-box-pack: justify;
					    -ms-flex-pack: justify;
					    justify-content: space-between;
					    margin-top: 5px;
					    color: #aaa;
					    font-size: 12px;
					    height: 24px;
					    line-height: 24px;
					}
					
				}
				>li:hover{
					border: 1px solid rgb(0, 128, 255);
					>.top>.img-mask{
						display: block;
					}
				}
			}
			
		}
	}
	/deep/ .el-table__body-wrapper tr td.el-table-fixed-column--left, .el-table__body-wrapper tr td.el-table-fixed-column--right, .el-table__body-wrapper tr th.el-table-fixed-column--left, .el-table__body-wrapper tr th.el-table-fixed-column--right, .el-table__footer-wrapper tr td.el-table-fixed-column--left, .el-table__footer-wrapper tr td.el-table-fixed-column--right, .el-table__footer-wrapper tr th.el-table-fixed-column--left, .el-table__footer-wrapper tr th.el-table-fixed-column--right, .el-table__header-wrapper tr td.el-table-fixed-column--left, .el-table__header-wrapper tr td.el-table-fixed-column--right, .el-table__header-wrapper tr th.el-table-fixed-column--left, .el-table__header-wrapper tr th.el-table-fixed-column--right {
	    background: #606475;
	}
	
	/deep/ .el-table__body-wrapper tr td.el-table-fixed-column--right, .el-table__body-wrapper tr th.el-table-fixed-column--left, .el-table__body-wrapper tr th.el-table-fixed-column--right, .el-table__footer-wrapper tr td.el-table-fixed-column--left, .el-table__footer-wrapper tr td.el-table-fixed-column--right, .el-table__footer-wrapper tr th.el-table-fixed-column--left, .el-table__footer-wrapper tr th.el-table-fixed-column--right, .el-table__header-wrapper tr td.el-table-fixed-column--left, .el-table__header-wrapper tr td.el-table-fixed-column--right, .el-table__header-wrapper tr th.el-table-fixed-column--left, .el-table__header-wrapper tr th.el-table-fixed-column--right {
	    background: #606475;
	}
	
	/deep/ .el-table__body-wrapper tr th.el-table-fixed-column--left, .el-table__body-wrapper tr th.el-table-fixed-column--right, .el-table__footer-wrapper tr td.el-table-fixed-column--left, .el-table__footer-wrapper tr td.el-table-fixed-column--right, .el-table__footer-wrapper tr th.el-table-fixed-column--left, .el-table__footer-wrapper tr th.el-table-fixed-column--right, .el-table__header-wrapper tr td.el-table-fixed-column--left, .el-table__header-wrapper tr td.el-table-fixed-column--right {
	    background: #606475;
	}
	
	/deep/ .el-table__header-wrapper tr th.el-table-fixed-column--left{
		 background-color: #3d3d41;
	}
	
	/deep/ .el-table__header-wrapper tr th.el-table-fixed-column--right{
		background: #1f2021;
	}
	
	/deep/ .el-table__body-wrapper tr td.el-table-fixed-column--right, .el-table__body-wrapper tr th.el-table-fixed-column--left[data-v-c23973b1], .el-table__body-wrapper tr th.el-table-fixed-column--right[data-v-c23973b1], .el-table__footer-wrapper tr td.el-table-fixed-column--left[data-v-c23973b1], .el-table__footer-wrapper tr td.el-table-fixed-column--right[data-v-c23973b1], .el-table__footer-wrapper tr th.el-table-fixed-column--left[data-v-c23973b1], .el-table__footer-wrapper tr th.el-table-fixed-column--right[data-v-c23973b1], .el-table__header-wrapper tr td.el-table-fixed-column--left[data-v-c23973b1], .el-table__header-wrapper tr td.el-table-fixed-column--right[data-v-c23973b1], .el-table__header-wrapper tr th.el-table-fixed-column--left[data-v-c23973b1], .el-table__header-wrapper tr th.el-table-fixed-column--right[data-v-c23973b1] {
	    background: #3d3d41;
	}
	
	/deep/ .el-table__inner-wrapper::before {
	    /* background-color: var(--el-table-border-color); */
		background-color:transparent;
	}
	
	/deep/ .el-table {
	    color: #ccc;
	}
	
	/deep/ .el-table th.el-table__cell{
	    background-color: #1f2021;
	}
	
	/deep/ .el-table thead {
	    font-weight: 500;
	}
	
	/deep/ .el-table tr {
	    background-color: #3d3d41;
	}
	
	/deep/.el-table th.el-table__cell.is-leaf {
	    /* border-bottom: var(--el-table-border); */
		border-bottom:  1px solid #606475;
	}
	
	/deep/.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
	    border-bottom:  1px solid #606475;
	}
	
	/* .el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, */
	/deep/.el-table__body tr.hover-row>td.el-table__cell{
		 background-color: #18222c;
	}
	
	/deep/.el-table__empty-text {
	    color: #ccc;
	}
	
	/deep/.el-table__empty-block {
	    background: #3d3d41;
	}
	
	/deep/ .el-input__wrapper {
		background-color: transparent;
		border-radius:0px;
	}
	
	/deep/ .el-date-editor.el-input__wrapper {
	    box-shadow: 0 0 0 1px #606475 inset;
		color: #ccc;
	}
	
	/deep/ .el-date-editor .el-range-input {
	   color: #ccc;
	}
	
	
</style>